:root {
    --theme-color: #0074d9;
    --sidebar-width: 16rem;
    --right-sidebar-width: 16rem;
    --right-sidebar-border-color: none;
    --base-background-color: #F5F7F9;
    --sidebar-background: #F5F7F9;
    --right-sidebar-background: #FFF;
    --cover-background-color: linear-gradient(to left bottom, hsl(211, 100%, 85%) 0%,hsl(169, 100%, 85%) 100%);
    --sidebar-border-color: rgba(0,0,0,0.07);
    --sidebar-border-width: 1px;
    --cover-border-inset: 50px;
    --cover-background-color: linear-gradient(to left bottom, hsl(211, 100%, 85%) 0%,hsl(169, 100%, 85%) 100%);
}

:root { /* sidebar pagelinks */
    --sidebar-nav-pagelink-background-image             : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cg opacity='.2'%3E%3Cpath d='M0 2V0h8v2zM0 5.073V3h8v2.073zM0 7.425V6h8v1.425l-4 .593z'/%3E%3C/g%3E%3C/svg%3E");
    --sidebar-nav-pagelink-background-image--active     : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' fill='%230074d9' height='8'%3E%3Cg opacity='.6'%3E%3Cpath d='M0 2V0h8v2zM0 5.073V3h8v2.073zM0 7.425V6h8v1.425l-4 .593z'/%3E%3C/g%3E%3C/svg%3E");
    --sidebar-nav-pagelink-background-image--collapse   : var(--sidebar-nav-pagelink-background-image);
    --sidebar-nav-pagelink-background-image--loaded     : var(--sidebar-nav-pagelink-background-image);
    --sidebar-nav-pagelink-background-position: calc(100% - 7px) 0.65em;
    --sidebar-nav-pagelink-background-position--active: var(--sidebar-nav-pagelink-background-position);
    --sidebar-nav-pagelink-background-position--collapse: var(--sidebar-nav-pagelink-background-position);
    --sidebar-nav-pagelink-background-position--loaded: var(--sidebar-nav-pagelink-background-position--active);
    --sidebar-nav-pagelink-padding: 0;
    --sidebar-nav-pagelink-transition: none;
    --sidebar-toggle-background: hsl( 113 , 0% , 89%);
    --sidebar-toggle-border-radius: 0 var(--border-radius-s) var(--border-radius-s) 0;
    --sidebar-toggle-width: 32px;
    --sidebar-nav-pagelink-background-repeat: no-repeat;
}

body, html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: Source Sans Pro,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #505c75;
    -webkit-font-smoothing: antialiased;
}

.app-nav {
    position: fixed;
}

section.cover .cover-main {
    padding: 0 40px;
}

section.cover td {
    padding: 0 40px;
}

section.cover .custom-block.grid strong {
    font-size: 24px;
}

section.cover .custom-block.grid img {
    max-width: 80px;
    margin-top: 40px;
}

section.cover .docspa-logo {
    max-width: 250px;
}

.content {
    padding-top: 0;
}

/* Move edit button */
.markdown-section > * > div[style] {
    float: right;
}

.markdown-section > * > div[style] a {
    text-decoration: none;
}

section.cover hr,
footer hr {
    border: none;
    border-bottom: 1px solid var(--theme-color-secondary-light, #0074d92e);
    margin: 2em 20%;
}

.sidebar hr {
    border: none;
    border-bottom: 1px solid var(--theme-color-secondary-light, #0074d92e);
    margin: 0 20%;
}

section.content footer {
    margin: 30px 0;
    text-align: center;
}

.left-sidebar {
    padding: 0;
}

.left-sidebar .docspa-logo {
    text-align: center;
    width: 100%;
    display: block;
}

::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

/* Buttons */
a.btn {
    border-color: var(--theme-color, #0074d9);
    border-radius: 2rem;
    border-style: solid;
    border-width: 1px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--theme-color, #0074d9);
    display: inline-block;
    font-size: 1.05rem;
    letter-spacing: 0.1rem;
    margin: 0.5rem 1rem;
    padding: 0.75em 2rem;
    text-decoration: none;
    -webkit-transition: all 0.15s ease;
    transition: all 0.15s ease;
}
a.btn.btn-primary {
    background-color: var(--theme-color, #0074d9);
    color: #fff;
}
a.btn.btn-primary:hover {
    color: inherit;
    opacity: 0.8;
}
a.btn:hover {
    color: inherit;
}

/* Rules for sizing the icon. */
.material-icons.md-15 { font-size: 15px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

[data-icon]::before {
    content: attr(data-icon);
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;

    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

#mermaid-host-render {
    height: 600px;
    width: 600px;
}

/* Sidebars */
/* TODO: Move this */
.sidebar.left-sidebar p {
    margin-bottom: 0;
}

.sidebar.left-sidebar .sidebar-nav ul > li > ul {
    overflow: hidden;
    line-height: 0;
    opacity: 0;
    transition: line-height 0.2s ease-in-out, opacity 0.4s ease-in-out;
}

.sidebar.left-sidebar .sidebar-nav ul > li.active > ul {
    opacity: 1;
    line-height: 2;
}

.sidebar .sidebar-nav ul li:hover > a,
.sidebar .sidebar-nav ul li.active a {
    border-right: none !important;
}

.sidebar .sidebar-nav ul ul {
    border-right: none !important;
    border-left: 1px solid var(--theme-color-secondary-light, #29D0CA);
    margin: 0 0 0 0.5em;
}

.sidebar .sidebar-nav ul li {
    padding: 0 0 0 0.5rem !important;
    margin: 0;
}

.sidebar .sidebar-nav ul li,
.sidebar .sidebar-nav ul li > p {
    font-weight: bold;
}

.sidebar .sidebar-nav li ul > li,
.sidebar .sidebar-nav ul ul > li > p {
    font-weight: normal;
}

.sidebar-nav li.has-children,
.sidebar-nav li > p.has-children,
.sidebar-nav li > a.has-children  {
    background-image: var(--sidebar-nav-pagelink-background-image--loaded, var(--sidebar-nav-pagelink-background-image)) !important;
    background-position: var(--sidebar-nav-pagelink-background-position--loaded, var(--sidebar-nav-pagelink-background-image)) !important;
    padding: var(--sidebar-nav-pagelink-padding, var(--sidebar-nav-link-padding)) !important;
    transition: var(--sidebar-nav-pagelink-transition) !important;
    background-repeat: var(--sidebar-nav-pagelink-background-repeat) !important;
    background-size: var(--sidebar-nav-pagelink-background-size) !important;
}

/* .sidebar-nav li>p.has-children.active,
.sidebar-nav li>a.has-children.active {
background-image: var(--sidebar-nav-pagelink-background-image--active, var(--sidebar-nav-pagelink-background-image)) !important;
background-position: var(--sidebar-nav-pagelink-background-position--active, var(--sidebar-nav-pagelink-background-image)) !important;
} */

    #main-nav .github-icon {
        width: 16px;
        height: 16px;
        vertical-align: baseline;
    }

    #main-nav .github-icon svg {
        display: inline-block;
        fill: currentColor;
    }

    #main-nav li {
        margin: 0 0.3rem;
    }

    #main-nav a {
        font-size: 21px;
    }

    #main-nav {
        margin: 0 10px;
    }
    html, body { height: 100%; }
    body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
    /* fallback */
    @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url(flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
    }

    .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
        -webkit-font-feature-settings: 'liga';
        -webkit-font-smoothing: antialiased;
    }
